<template>
	<div id="app">
		<!-- <a-button type="danger" @click="changeLang('enUS')">English</a-button>
		<a-button type="primary" @click="changeLang('zhCN')">中文</a-button>
		<a-button @click="changeLang('esES')">Español</a-button> -->
		<a-config-provider :locale="locale">
			<router-view />
		</a-config-provider>
	</div>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enUS from 'ant-design-vue/lib/locale-provider/en_US'
import esES from 'ant-design-vue/lib/locale-provider/es_ES'
import { mapActions, mapGetters } from 'vuex'
const LANG = {
	zhCN: zhCN,
	enUS: enUS,
	esES: esES,
}
export default {
	computed: {
		...mapGetters('setting', ['lang']),
		locale() {
			return LANG[this.lang] || zhCN
		},
	},
	methods: {
		...mapActions('setting', ['setLang']),
		changeLang(lang) {
			this.$i18n.locale = lang
			this.setLang(lang)
		},
	},
}
</script>
